<template>
  <div class="app-container commercial-content">
    <!-- 工具栏 start-->

    <BtnGroup ref="btnGroup" :btns="btns" @handle="handleBtnGroup" />
    <!-- 工具栏 end-->
    <div class="table-content">
      <el-table ref="table" :data="lists" row-key="id" :height="st" lazy>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="id" label="入库ID"> </el-table-column>
        <el-table-column prop="name" label="入库类型名称"> </el-table-column>
        <el-table-column prop="short_name" label="入库类型名称">
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="editFrom(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <pagination
        ref="paginationTotal"
        :page="currentPage"
        :total="total"
        :size="pageSize"
        @sizeChange="sizeChange"
        @currentChange="currentChange"
      />
    </div>

    <!-- 维护入库类型 -->
    <el-dialog :visible.sync="entryTypeDialog" title="新建入库类型">
      <el-form
        ref="typeForm"
        :model="enterTypeFormData"
        label-width="180px"
        size="small"
        :rules="rules"
      >
        <el-form-item label="类型名称：" prop="name">
          <el-input
            v-model.trim="enterTypeFormData.name"
            placeholder="请输入"
            maxlength="10"
          />
        </el-form-item>

        <el-form-item label="类型简称：" prop="short_name">
          <el-input
            v-model.trim="enterTypeFormData.short_name"
            placeholder="请输入"
            maxlength="4"
          />
        </el-form-item>
      </el-form>
      <div class="tool2">
        <el-button @click="enterTypeBtn" type="primary" size="medium"
          >确定</el-button
        >
        <el-button @click="entryTypeDialog = false" size="medium"
          >取消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { getList } from '@/api/table'
import selectListMixins from "@/mixins/selectList.js";
export default {
  mixins: [selectListMixins],
  data() {
    return {
      btns: [
        { title: "删除", pos: "right", handle: "del" },
        { title: "新增", pos: "right", handle: "enterType" },
      ],
      formData: {},

      entryTypeDialog: false,
      enterTypeFormData: {
        name: "",
        short_name: "",
      },

      lists: [],
      dialogloading: true,
      loading: false,

      goodsDialog: false,
      entryTypeDict: [], //入库类型字典
      warehouseTypeDict: [], //仓库类型列表
      currentPage: 1, // 默认显示第几页
      total: 0, // 总条数，根据接口获取数据长度(注意：这里不能为空)
      pageSizes: [50, 100, 200], // 个数选择器（可修改）
      pageSize: 30, // 默认每页显示的条数（可修改）
      st: 0,
      dialogVisible: false,
      // 验证表单
      rules: {
        short_name: [
          { required: true, message: "请输入简称", trigger: "blur" },
           { pattern: /(^[a-zA-Z]{1}[a-zA-Z\s]{0,20}[a-zA-Z]{1}$)/, message: "只能输入字母", trigger: "blur" },
        ],
        name: [{ required: true, message: "请输入类型名称", trigger: "blur" }],
      },
    };
  },

  mounted() {
    const that = this;
    that.$util.autoHeight(that, that.$refs.table.$el);
    that.getData();
  },
  methods: {
    /**
     * 统一获取函数
     */
    async getData() {
      this.handleRequest();
    },
    /**
     * 确认按钮
     */
    async enterTypeBtn() {
      let that = this;
      that.$refs.typeForm.validate(async (v) => {
        if (!v) {
          return false;
        }
        try {
          that.dialogloading = true;
          await that.$.debouchment.entryTypeAdd(that.enterTypeFormData);
          that.dialogloading = false;
          that.entryTypeDialog = false;

          that.$message({ type: "success", message: "添加成功" });
          that.handleSearch();
        } catch (e) {
          that.dialogloading = false;
        }
      });
    },
    /**
     * 头部按钮列表
     */
    handleBtnGroup(evt) {
      let { handle } = evt;
      switch (handle) {
        case "del":
          this.delBtn();
          break;
        case "enterType":
          this.entryTypeDialog = true;
          this.enterTypeFormData = { name: "", id: "", short_name: "" };
          break;
        default:
          break;
      }
    },
    /**
     * 编辑
     */
    editFrom(item) {
      this.entryTypeDialog = true;
      this.enterTypeFormData.id = item.id;
      this.enterTypeFormData.name = item.name;
      this.enterTypeFormData.short_name = item.short_name;
      this.dialogloading = false;
    },

    /**
     * 查看日志
     */
    toLog() {
      this.$router.push(`/commercial/log`);
    },

    /**
     * 删除按钮
     */
    async delBtn() {
      let that = this;
      let _selectData = that.$refs.table.selection;
      let ids = [];
      _selectData.forEach((item, i) => {
        ids.push({ id: item.id });
      });
      if (ids.length <= 0) {
        that.$message({ type: "error", message: "请选择需要操作的类型！" });
        return false;
      }
      //请求接口
      async function doAction(ids) {
        try {
          that.dialogloading = true;
          const { result } = await that.$.debouchment.entryTypeDel(ids);
          that.dialogloading = false;
          that.handleRequest();
          if (result.row == 0) {
            that.$message({ type: "success", message: "未有处理数据" });
          } else {
            that.$message({ type: "success", message: "删除成功" });
          }
        } catch (e) {
          that.dialogloading = false;
        }
      }
      this.$confirm(
        "当前选中共" + ids.length + "条，" + "您确认删除么？",
        "删除",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          doAction(ids);
        })
        .catch(() => {
          //取消的提示
        });
    },
    /**
     * 搜索
     */
    handleSearch(statu) {
      this.currentPage = 1;
      this.handleRequest();
    },

    /**
     * 弹框的行更改
     */
    rowChange(e) {
      console.log(e);
    },

    /**
     * 页改变
     */
    sizeChange(e) {
      const that = this;
      that.currentPage = 1;
      that.pageSize = e;
      that.handleRequest();
    },

    /**
     * 页数
     */
    currentChange(e) {
      this.currentPage = e;
      this.handleRequest();
    },
    /**
     * 请求列表
     */
    async handleRequest() {
      const that = this;
      const { currentPage, pageSize } = that;
      let o = {
        page_size: pageSize,
        page: currentPage,
      };
      that.$util.ext(that.formData, o);
      try {
        that.loading = true;
        const { result } = await that.$.debouchment.entryTypeIndex(
          that.formData
        );
        that.total = result.pagination.total_count;
        that.$refs.table.bodyWrapper.scrollTop = 0;
        that.lists = result.list;
        that.loading = false;
      } catch (e) {
        that.loading = false;
      }
    },
    /**
     * 选择
     *  */
    handleSelect() {
      this.currentPage = 1;
      this.handleRequest();
    },
  },
};
</script>

<style lang="scss" scoped>
.top-state {
  margin-bottom: 12px;
}
.el-cascader,
.el-select {
  width: auto;
}
.inp1 {
  flex: 1;
  margin-right: 12px;
}

.supname {
  margin: -18px 0 0 12px;
}

.label {
  font-size: 13px;
  margin-right: 5px;
}
</style>

<style >
.add-goods-dialog .el-dialog__body {
  padding-top: 12px;
}
.top-search .el-form-item {
  margin-bottom: 0;
}
.commercial-content .cell {
  text-align: center;
}
.edit-tips {
  color: #c0c4cc;
  font-size: 12px;
  line-height: 1;
  position: absolute;
  padding-top: 2px;
  top: 100%;
  left: 0;
}
.add-dialog .el-form-item__content {
  display: flex;
}
.add-dialog .el-cascader {
  width: 100%;
}
.commercial-content .top-search .el-select {
  width: auto;
  display: inline-block;
  position: relative;
  margin-right: 4px;
  margin-bottom: 4px;
}
.commercial-content .top-search .el-input {
  width: auto;
  margin-right: 4px;
  margin-bottom: 4px;
}
</style>